<template>
	<view>
		<uniSatusBar />
		<view class="title-wrapper">手机验证码登录</view>
		<view class="login-wrapper">
			<input type="number" value="" placeholder="手机号" class="inp"/>
			<view class="pass-wrapper">
				<input type="number" value="" placeholder="验证码" class="inp"/>
				<button type="default" class="button-hover btn" size="mini">获取验证码</button>
			</view>
			<button type="warn" class="submit-btn" @click="login">登录</button>
			<otherLogin />
			
			<scan />
			
		</view>
	</view>
</template>

<script>
	import uniSatusBar from '@/components/uni-status-bar/uni-status-bar.vue'
	import otherLogin from '@/components/login/login.vue'
	import scan from '@/components/scan-code/scan-code.vue'
	export default {
		components:{
			uniSatusBar,
			otherLogin,
			scan
		},
		data() {
			return {
				userName: '',
				code: '',
				statusBarHeight: 0
			}
		},
		methods: {
			login() {
				uni.switchTab({
				    url: '/pages/index/index'
				});
			}
		},
		onLoad() {
			let { statusBarHeight } = uni.getSystemInfoSync()
			this.statusBarHeight = statusBarHeight
		}
	}
</script>

<style lang="scss">
	.title-wrapper {
		text-align: center;
		padding-top: 130rpx;
		padding-bottom: 70rpx;
		font-size: 56rpx;
	}
	
	.login-wrapper {
		padding-left: 20rpx;
		padding-right: 20rpx;
		.pass-wrapper {
			display: flex;
			align-items: center;
			.btn {
				height: 60rpx;
				line-height: 60rpx;
			}
		}
		.inp {
			border: 2rpx solid #ccc;
			padding: 20rpx;
			margin-bottom: 20rpx;
			border-radius: 4rpx;
		}
		.submit-btn {
			margin-top: 30rpx;
			height: 68rpx;
			line-height: 68rpx;
			border-radius: 34rpx;
		}
	}
</style>
